<!-- 首页 -->
<template>
	<view class="container">
		<view class="tabar"
			:style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px',paddingRight:navBarRight + 'px' }">
			<view class="citylist" @click="citilist">
				<view class="">
					{{citititle.length>2? citititle.substring(0, 2)  + ".." : citititle}}
				</view>
				<view class="">
					<u-icon name="arrow-down" v-if="cityicon" color="#000" size="10"></u-icon>
					<u-icon name="arrow-up" v-else color="#000" size="10"></u-icon>
				</view>
			</view>
			<!-- navBarLeft胶囊左侧的距离,减去下拉框文字,减去输入框和胶囊的间距 -->
			<view class="header" :style="{width:navBarLeft - 75 - 8 +'px'}">
				<u--input placeholder="请输入搜索内容" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
					type="text" confirm-type='search' @confirm='seled' v-model="value"></u--input>
			</view>
		</view>
		<!-- 整体页面高度减去导航栏顶部,高度,和底部距离 -->
		<scroll-view ref="myScrollView" @scrolltolower='scrolltolower' scroll-y :scroll-top='scrollytop'
			@scroll='scroll' :style="{ height: `calc(100vh - ${navBarTop}px - ${navBarHeight}px - 10px - 60px)` }"
			style="background-color: #f4f4f4;">
			<view>
				<view class="other">
					<view class="other-item">
						<u-scroll-list :indicator="(menuArr[0].length > 5)">
							<view class="scroll-list">
								<view style="display:flex; margin-bottom: 10px; " v-for="(item, index) in menuArr"
									:key="index">
									<view v-for="(item1, index1) in item" :key="index1" class="itemitem"
										@click="typedetail(item1.type)">
										<view class="other-item-icon">
											<u--image :showLoading="true" :src="item1.icon" width="35px"
												height="35px"></u--image>
										</view>
										<view class="other-item-name">
											{{ item1.name }}
										</view>
									</view>
								</view>
							</view>
						</u-scroll-list>
					</view>
				</view>
				<!-- <view class="other_class"> -->
				<!-- <view class=""> -->
				<!-- <u-tabs :list="list" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`"
							:activeStyle="{
						    color: '#303133',
						    fontWeight: 'bold',
						    transform: 'scale(1.05)'
						}" :inactiveStyle="{
						    color: '#606266',
						    transform: 'scale(1)'
						}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="tabclick">
						</u-tabs> -->
				<!-- </view> -->
				<!-- </view> -->
				<!-- //8 -->
				<view class="" style="padding: 0 15px; margin-top: 10px;"
					:style="{ 'min-height': `calc(100vh - ${navBarTop}px - ${navBarHeight}px - 110px - 60px - 25px - 30px)` }">
					<custom-waterfalls-flow ref="waterfallsFlowRef" :value="typelist" :column="2" imageKey='headImages'
						:columnSpace="1.5" :seat="2" @wapperClick="messagedetail" @imageClick="messagedetail"
						@loaded='imgloader'>
						<view class="one_class" v-for="(item,index) in typelist" :key="index" slot="slot{{index}}">
							<view class="info">
								<view class="info_label">
									<view class="two__item">
										{{item.dynamicType==1?'房屋租赁':''}}
										{{item.dynamicType==3?'公司招聘':''}}
										{{item.dynamicType==2?'个人简历':''}}
										{{item.dynamicType==4?'我有好货':''}}
										{{item.dynamicType==7?'社区团购':''}}
										{{item.dynamicType==8?'社区公益':''}}
										{{item.dynamicType==6?'社区服务':''}}
										{{item.dynamicType==9?'教育服务':''}}
										{{item.dynamicType==10?'养老服务':''}}
									</view>
									<!-- <view class="two__item" v-for="obj in item.shoplist" :key="obj.index">
										{{obj}}
									</view> -->
								</view>
								<view>
									{{item.topic ? (item.topic.length>8? item.topic.substring(0, 8)  + ".." : item.topic): (item.content.length>8? item.content.substring(0,8)  + ".." : item.content)}}
								</view>
								<view class="" style="color: #f3431c; font-weight: 600;">
									{{item.price?(item.price.length>10? item.price.substring(0,10)  + ".." : item.price):''}}{{ item.salaryType ? (item.salaryType == 1 ? '/天' : (item.salaryType == 2 ? '/月' : (item.salaryType == 3 ? '/年' : ''))) : '' }}
								</view>
								<view class="awatarname">
									<view class="" style="display: flex; align-items: center;">
										<view class="" style="margin-right:5px;">
											<u-avatar :size='20' :src="item.nickUrl" shape="circle"></u-avatar>
										</view>
										<view class="">
											<view class="" style="font-size: 11px; color: #666;">
												{{item.nickName.length>4? item.nickName.substring(0,4)  + ".." : item.nickName}}
											</view>

										</view>
									</view>
									<view class="" style="font-size: 11px; color: #666;">
										{{item.timestr}}
									</view>
								</view>
							</view>
						</view>
					</custom-waterfalls-flow>



				</view>
				<!-- <view  v-if="typelist.length>10" > -->
				<u-loadmore line :status="status" :loading-text="loadingText" :nomore-text="nomoreText" />
				<!-- </view> -->

			</view>
		</scroll-view>
		<layout>
		</layout>
		<u-picker :show="show" ref="uPicker" @cancel='cancel' keyName="label" :columns="columns" @confirm="confirm"
			@change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import {
		formatTimeAgo,
	} from '../../utils/utils.js'
	import layout from '../layout/layout.vue'
	export default {
		data() {
			return {
				list: [{
					name: '综合',
				}, {
					name: '离我最近',
				}, {
					name: '最新发布',
				}, {
					name: '信息发布量',
				}, {
					name: '交易成交率',
				}, ],
				lineBg: "",

				scrollytop: 0,
				scrollnow: 0,
				imgloaderstate: true,
				status: 'loadmore',
				loadingText: '努力加载中',
				nomoreText: '没有更多了',
				typelist: [],
				query: {
					communityId: '',
					topicLike: '',
					pageNum: 1,
					pageSize: 10,
				},
				value: '', //搜索项
				citititle: '全部',
				show: false,
				navBarTop: 20,
				navBarHeight: 30,
				navBarLeft: 250,
				columns: [],
				columnData: [],
				cityicon: true, //城市下拉图标切换
				menuArr: [
					[{
							name: '社区团购',
							icon: 'https://api.9hkj.net/images/banner/7.png',
							type: 1,
						},
						{
							name: '我有好货',
							icon: 'https://api.9hkj.net/images/banner/1.png',
							type: 2,
						},

						{
							name: '求职招聘',
							icon: 'https://api.9hkj.net/images/banner/2.png',
							type: 4,
						},
						{
							name: '社区公益',
							icon: 'https://api.9hkj.net/images/banner/4.png',
							type: 5,
						},

					],
					[{
						name: '房屋租赁',
						icon: 'https://api.9hkj.net/images/banner/9.png',
						type: 6,
					}, {
						name: '社区服务',
						icon: 'https://api.9hkj.net/images/banner/11.png',
						type: 7,
					},
					 {
					 	name: '教育服务',
					 	icon: 'https://api.9hkj.net/images/banner/8.png',
					 	type: 8,
					 }, {
					 	name: '养老服务',
					 	icon: 'https://api.9hkj.net/images/banner/10.png',
					 	type: 9,
					 }, ]
				],
			};
		},
		mounted() {
			///8.23,过段时间可删除 
			const info = uni.getStorageSync('userinfokey')
			if (info && !info.communityId) {
				uni.removeStorageSync('userinfokey');
			}

			const that = this
			//请求下拉选
			this.$request(`/select/area`, 'get').then(
				res => {
					const obj = {
						id: 9999,
						label: '全部'
					}
					that.columns = res.data.data.columns
					that.columns[0].unshift(obj)
					that.columns[1] = [obj]
					that.columnData = res.data.data.columnData
					that.columnData.unshift([obj])
				})
			//获取胶囊位置
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarTop = menuButtonInfo.top;
			this.navBarHeight = menuButtonInfo.height;
			this.navBarLeft = menuButtonInfo.left;
			uni.$emit('update', {
				active: 1
			}) // 触发事件并传递参数	
			this.pagelist()
		},
		components: {
			layout
		},
		methods: {
			tabclick(e) {
				this.scrollytop = this.scrollnow
				this.$nextTick(() => {
					this.scrollytop = 0
				});
				// this.tabindex = e.index
				this.$refs.waterfallsFlowRef.refresh();
				this.query.topicLike = ''
				this.typelist = []
				this.imgloaderstate = true
				this.query.pageNum = 1
				this.pagelist()
			},
			scroll(e) {
				this.scrollnow = e.detail.scrollTop
			},
			imgloader() {
				this.imgloaderstate = true
				// console.log('加载完成');
			},
			//查询
			seled() {
				this.scrollytop = this.scrollnow
				this.$nextTick(() => {
					this.scrollytop = 0
				});
				this.query.topicLike = this.value
				this.query.pageNum = 1
				this.imgloaderstate = true
				this.typelist = []
				this.$refs.waterfallsFlowRef.refresh();
				this.pagelist(1)
			},
			pagelist(e) {
				this.$request(`/index/listByPage`, 'post', this.query).then(
					res => {
						this.imgloaderstate = res.data.data.list.length == 0 ? true : false
						this.status = res.data.data.list.length == 0 ? 'nomore' : 'loading'
						const arr = res.data.data.list.map(item => ({
							...item,
							shoplist: item.labels == '' || !item.labels ? [] : item.labels.split(","),
							timestr: formatTimeAgo(item.updateTime)
						}));
						this.typelist = this.typelist.concat(arr)


					})
			},
			// 分类详情列表跳转
			typedetail(e) {
				this.seled()
				uni.navigateTo({
					url: '/pages/detail/userclassdetail?value=' + encodeURIComponent(e)
				});
			},
			// 下拉选级联选择
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 下拉选取消
			cancel() {
				this.show = false
				this.cityicon = !this.cityicon
			},
			// 下拉选确定
			confirm(e) {
				this.scrollytop = this.scrollnow
				this.$nextTick(() => {
					this.scrollytop = 0
				});
				this.show = false
				this.cityicon = !this.cityicon
				this.citititle = e.value[1].label
				this.typelist = []
				this.$refs.waterfallsFlowRef.refresh();
				this.query.communityId = e.value[1].label == '全部' ? '' : e.value[1].id
				this.query.pageNum = 1
				this.imgloaderstate = true
				this.pagelist();
			},
			// 打开下拉选弹窗
			citilist() {

				this.show = true
				this.cityicon = !this.cityicon
			},
			// 触底翻页
			scrolltolower() {
				if (this.imgloaderstate) {
					this.query.pageNum++
					this.pagelist()

				}

			},
			// 每条消息详情.
			messagedetail(e) {
				if (e.dynamicType == 1) {
					uni.navigateTo({
						url: '/pages/detail/subleasemessage_detail?typeid=' + encodeURIComponent(e.id)
					});
				} else if (e.dynamicType == 2) {
					uni.navigateTo({
						url: '/pages/detail/resumemessage_detail?typeid=' + encodeURIComponent(e.id)
					});
				} else if (e.dynamicType == 3) {
					uni.navigateTo({
						url: '/pages/detail/recruitmessage_detail?typeid=' + encodeURIComponent(e.id)
					});
				} else if (e.dynamicType == 4) {
					uni.navigateTo({
						url: '/pages/detail/marketmessage_detail?typeid=' + encodeURIComponent(e.id)
					});
				} else if (e.dynamicType == 6) {
					uni.navigateTo({
						url: '/pages/detail/communitymessage_detail?typeid=' + encodeURIComponent(e.id)
					});
				} else if (e.dynamicType == 7) {
					uni.navigateTo({
						url: '/pages/detail/buying_detail?typeid=' + encodeURIComponent(e.id)
					});
				} else if (e.dynamicType == 8) {
					uni.navigateTo({
						url: '/pages/detail/activity_detail?typeid=' + encodeURIComponent(e.id)
					});
				}else if (e.dynamicType == 9) {
					uni.navigateTo({
						url: '/pages/detail/education_detail?typeid=' + encodeURIComponent(e.id)
					});
				}else if (e.dynamicType == 10) {
					uni.navigateTo({
						url: '/pages/detail/elderly_detail?typeid=' + encodeURIComponent(e.id)
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;

		/* 禁止手动调整文本框大小 */
		::-webkit-scrollbar {
			width: 0px;
			/* 滚动条的宽度 */
		}

		.tabar {
			// background-color: #ffc40f;
			background-color: #fbc338;
			display: flex;
			align-items: center;
			padding-bottom: 10px;

			.citylist {
				justify-content: center;
				width: 75px;
				color: #000;
				font-weight: 600;
				font-size: 15px;
				align-items: center;
				display: flex;
			}

			.header {
				::v-deep .u-input {
					background-color: #fefbe7 !important;
				}
			}
		}

		.other_class {
			display: flex;
			align-items: center;
			height: 30px;
			display: flex;
			width: calc(100% - 30px);
			padding: 5px 15px;
		}

		.other {
			display: flex;
			justify-content: center;
			width: 100vw;
			background-color: #fff;

			.other-item {
				width: calc(95% - 10px);
				background-color: #fff;
				border-radius: 10px;
				padding: 10px 5px 0px 5px;

				::v-deep .u-scroll-list {
					.u-scroll-list__indicator {
						margin-top: 6px;
					}
				}

				.itemitem {
					width: calc((95vw - 10px) * 0.25);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.other-item-icon {
					margin-bottom: 5px;

					.iconfont {
						font-size: 33px;
					}

					.icon-shequtuangou {
						background: linear-gradient(to right bottom, #00c859, #6be68e, #caf3db);
						/* 创建从左到右的渐变背景 */
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.icon-tiaozaoshichang01 {
						background: linear-gradient(to right bottom, #c85833, #e69646, #f3e760);
						/* 创建从左到右的渐变背景 */
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.icon-tongchengwaimai {
						background: linear-gradient(to right bottom, #2651c8, #43a0e6, #5dd8f3);
						/* 创建从左到右的渐变背景 */
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.icon-gerenjianli {
						background: linear-gradient(to right bottom, #fd310d, #fd5234, #fe785d);
						/* 创建从左到右的渐变背景 */
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.icon-zhaopin {
						background: linear-gradient(to right bottom, #fd790e, #fd9630, #feda4a);
						/* 创建从左到右的渐变背景 */
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.icon-zufang {
						background: linear-gradient(to bottom, #3737c8, #42ade6, #7ccae6);
						/* 创建从左到右的渐变背景 */
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.icon-youwenyouda1 {
						background: linear-gradient(to bottom, #0fe86a, #47e8ad, #47ffe1);
						/* 创建从左到右的渐变背景 */
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

				.other-item-name {
					font-size: 12px;
				}
			}
		}

		::v-deep .column-value-show {
			border-radius: 10px !important;
		}

		::v-deep .column-value .img {
			max-height: 240px;
			min-height: 100px;
		}

		.one_class {
			display: inline-block;
			width: 100%;
			margin-bottom: 10px;
			background-color: #fff;
			border-radius: 10px;
			position: relative;

			.info {
				padding: 8px;

				.title_ma {
					margin-bottom: 5px;

					.mabot {
						font-size: 18px;
						color: #ff0004;
					}
				}

				.info_label {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					font-size: 11px;
					position: absolute;
					background-color: #fbc338;
					top: -20px;
					left: 0px;
					height: 20px;
					padding: 0 5px;
					border-radius: 0 3px 0 0;
					/* 顺序为 top-left top-right bottom-right bottom-left */
					// .two__item {
					// 	margin-bottom: 5px;
					// 	padding: 2px 8px;
					// 	margin-right: 3px;
					// 	border-radius: 10px;
					// 	color: #3072f6;
					// 	background-color: #eaf1fd;
					// }

					// :first-child {
					// 	color: #fff;
					// 	background-color: #3072f6;
					// }
				}

				.awatarname {
					justify-content: space-between;
					margin-top: 5px;
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>